package myJs.components

import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.PureInputComponent
import myJs.components.inline.{BetweenInlineComponent, InputInlineComponent, SelectInlineComponent}
import myJs.myPkg.jquery._
import myJs.tool.Tool._
import shared.Pojo.AllPlotData
import myJs.Implicits._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object PlotLayoutComponent {

  @Lenses
  case class State(
      formJq: JQuery,
      feaf: String,
      feasmean: String,
      feasmedian: String,
      feaca: String,
      feabot: String,
      featop: String,
      width: String,
      height: String,
      feafname: String,
      feafnameMap: SeqMap[String, String]
  )

  object State {

    def init = {
      State(
        formJq = $("#form"),
        feaf = "diff",
        feasmean = "y",
        feasmedian = "y",
        feaca = "0",
        feabot = "0",
        featop = "-1",
        width = "13",
        height = "6",
        feafname = "",
        feafnameMap = SeqMap[String, String]()
      )
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val feafMap = SeqMap("all" -> messages("all"), "diff" -> messages("diff"), "one" -> messages("one"))
      val feasmeanMap = SeqMap("y" -> messages("yes"), "n" -> messages("no"))
      val feacaMap = SeqMap("0" -> "0", "45" -> "45", "90" -> "90", "315" -> "135", "270" -> "270")
      val feafnameShow = s.feaf == "one"
      div(
        SelectInlineComponent
          .Props(State.feaf.zoomL, label = messages("feaf"), name = "feaf", optionMap = feafMap)
          .render,
        SelectInlineComponent
          .Props(
            State.feafname.zoomL,
            label = messages("feafname"),
            name = "feafname",
            optionMap = s.feafnameMap,
            questionInfo = messages("feafnameInfo"),
            show = feafnameShow
          )
          .render,
        SelectInlineComponent
          .Props(State.feasmean.zoomL, label = messages("feasmean"), name = "feasmean", optionMap = feasmeanMap)
          .render,
        SelectInlineComponent
          .Props(State.feasmedian.zoomL, label = messages("feasmedian"), name = "feasmedian", optionMap = feasmeanMap)
          .render,
        SelectInlineComponent
          .Props(State.feaca.zoomL, label = messages("feaca"), name = "feaca", optionMap = feacaMap)
          .render,
        InputInlineComponent
          .Props(
            State.feabot.zoomL,
            label = messages("feabot"),
            name = "feabot",
            formJq = s.formJq,
            questionInfo = messages("feabotInfo")
          )
          .render,
        InputInlineComponent
          .Props(
            State.featop.zoomL,
            label = messages("featop"),
            name = "featop",
            formJq = s.formJq,
            questionInfo = messages("featopInfo")
          )
          .render,
        div(
          `class` := "form-group",
          label(`class` := "control-label col-sm-4", s"${messages("picSizeWidthHeight")}", ":"),
          div(
            `class` := "col-sm-8",
            div(
              `class` := "input-group",
              PureInputComponent.Props(State.width.zoomL, name = "width", formJq = s.formJq).render,
              span(`class` := "input-group-addon", "-"),
              PureInputComponent.Props(State.height.zoomL, name = "height", formJq = s.formJq).render
            )
          )
        )
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
